<template>
  <div class="chat-message-box">
    <left-message-card v-if="props.message.position==='left'" :message="props.message"></left-message-card>
    <right-message-card v-if="props.message.position==='right'" :message="props.message"></right-message-card>
  </div>
</template>

<script lang="ts" setup>
import LeftMessageCard from "@/components/left-message-card.vue"
import RightMessageCard from "@/components/right-message-card.vue"

const props = defineProps({
  message: {
    required: true
  }
})
</script>

<style scoped>
.chat-message-box {
  width: 100%;
}
</style>